// pages/menu/index.js
import store from '../../api/store'
const chooseLocation = requirePlugin('chooseLocation');
// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk');
var qqmapsdk;
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { stores } from '../../store/index'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    latitude:0,//维度
    longitude:0,//精度
    // mapContext:null,
    markers: [],
    storeList:[],
    storeDetailShow:false,
    currentStore:{},
    collapse:false
  },
  /**
   * 请求初始数据
   */
  requestStoreList(){
    //请求数据库
    store.list(this.data.latitude,this.data.longitude).then( res=>{
      this.makerStoreList(res.data)
      this.creactMarkers(res.data)
    })
  },
  /**
   * 生成markers信息
   * @param {*} data 
   */
  creactMarkers(data){
    //console.log(data);
    let markers=data.map((item,index)=>({
      id:index,
      title:item.name,
      latitude:item.location.latitude,
      longitude:item.location.longitude,
      iconPath: '../../assets/images/marker.png',
      width: '55rpx', height: '69rpx'
    }))
    this.setData({
      markers
    })
  },
  /**
   * 拿到当前位置 并且返回门店信息
   */
   initLocation(){
     wx.getLocation({
      type: 'wgs84',
       success:(res)=> {
        const latitude = res.latitude
        const longitude = res.longitude
        //console.log(latitude,longitude,'我的位置');
        this.setData({
          latitude,
          longitude
        })
        //向数据库请求数据
         this.requestStoreList()
      }
     })
  },
  /**
   * 搜索地址附近的门店
   * @param {*} e 
   */
  chooseLocation(e){
    //console.log(e);
    const key = 'LKEBZ-IJ7K3-ZTV3F-YZMMH-4S3Q2-MZF4Q'; //使用在腾讯位置服务申请的key
    const referer = 'Tmm'; //调用插件的app的名称
    const location = JSON.stringify({
      latitude:this.data.latitude,
      longitude:this.data.longitude
    });
     
    wx.navigateTo({
      url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location 
    });
    
  },
  /**
   * 
   * @param {*} e 
   */
  goToMenu(e){
    //console.log(e);
    const {storeId}=e.currentTarget.dataset;
    let index = this.data.storeList.findIndex((i)=>i._id===storeId)
    wx.navigateTo({
      url: `/pages/goods/index?index=${index}`,
    })
  },
  colsapse(){
    this.setData({
      collapse:!this.data.collapse
    })
  },
  /**
   * 获取门店详细信息
   */
  popupStoreDetail(e){
  //console.log(e);
   let currentStore = {...e.currentTarget.dataset.store}
   this.setData(
     {
       currentStore,
       storeDetailShow:true
     }
   )
  },
  //回到当前位置
  goToCurrentLocation(){
    //console.log(this.data.latitude);
    // this.mapContext.moveToLocation()
    this.initLocation()
    
  },
  makerStoreList(initData){
    //console.log(initData,'初始的storeList数据');
    //如果门店为空直接返回
    if(!initData.length){
      return
    }
    for(let i=0;i<initData.length;i++){
      // initData[i]['adress']=
      initData[i].latitude=initData[i].location.latitude;
      initData[i].longitude=initData[i].location.longitude
      //返回详细地址
      qqmapsdk.reverseGeocoder(
        {
          location:{
            latitude: initData[i].latitude,
            longitude: initData[i].longitude
          },
          success:(res)=>{
            //console.log(res);
            initData[i]['address'] = res.result.address
            // this.setData({
            //   storeList:initData
            // })
          },
          fail: function(error) {
            console.error(error);
          },
        }
      )
      //返回距离 设置好门店信息
      qqmapsdk.calculateDistance(
        {
          to:[{
            latitude: initData[i].latitude,
            longitude: initData[i].longitude
          }],
          success:(res)=>{
            //console.log(res);
            let distance = res.result.elements[0].distance
            //console.log(distance/1000);
            if(distance>=1000) {
              distance=(distance/1000).toFixed(1) + 'km'
            }else{
              distance=distance + 'm'
            }
            initData[i]['distance']=distance
            this.setData({
              storeList:initData
            })
          
            //绑定全局数据，门店信息
            //执行了4遍 应该与小程序的刷新机制有关
            this.setShopList(initData)
            //console.log(this.data.shopList,'---');
          },
          fail:(err)=>{
            //console.log(err);
          }
        }
      )
    }
  },
  initMapSdk(){
    qqmapsdk = new QQMapWX({
      key: 'LKEBZ-IJ7K3-ZTV3F-YZMMH-4S3Q2-MZF4Q'
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    //console.log(stores);
    this.storeBindings = createStoreBindings(this, {
      store:stores, // 需要绑定的数据仓库
      fields: ['shopList'], // 将 this.data.list 绑定为仓库中的 list ，即天气数据
      actions: ['setShopList'], // 将 this.setList 绑定为仓库中的 setList action
    })
    // map的sdk
    this.initMapSdk()
    /**
     * 拿到当前位置
     */
     await this.initLocation()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
   
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    const location = chooseLocation.getLocation()
    //console.log(location);
    if(location){
      this.setData({
        latitude:location.latitude,
        longitude:location.longitude
      })
      //向数据库请求数据
       this.requestStoreList()
      //this.initLocation()
    }
   
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    //地图选点
    chooseLocation.setLocation(null)
    // 解绑仓库
    this.storeBindings.destroyStoreBindings()
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})